<!--
 * @Author: xuxu12138 1718324422@qq.com
 * @Date: 2023-08-31 16:29:28
 * @LastEditors: xuxu12138 1718324422@qq.com
 * @LastEditTime: 2024-01-02 11:32:16
 * @FilePath: /things-admin/src/view/dataScreen/components/select.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="select" :style="{ width: width + 'px', height: height + 'px' }">
    <div
      class="header_select"
      @click.stop="showOrHidden"
      :style="{ width: width + 'px', height: height + 'px' }"
    >
      <div v-show="id == 1" class="header_content">
        {{ valueOne ? valueOne : placeholder }}
      </div>
      <div v-show="id == 2" class="header_content">
        {{ valueOne && (Show == 2 || Show == 3) ? valueOne : placeholder }}
      </div>
      <div v-show="id == 3" class="header_content">
        {{ valueOne && Show == 3 ? valueOne : placeholder }}
      </div>
      <img
        :src="isShow ? selectIocnTwo : selectIocnOne"
        alt=""
        class="header_icon"
      />
    </div>
    <transition name="el-fade-in">
      <div
        class="content_select"
        v-show="isShow"
        :style="{ width: width + 'px' }"
      >
        <div
          v-show="optionList[0]"
          class="child"
          :style="{ width: width - 28 + 'px' }"
          v-for="(item, index) in optionList"
          :key="index"
          :value="item.value"
          @click.stop="selectValue(item)"
          :class="item.label == valueOne ? 'active' : ''"
        >
          {{ item.label }}
        </div>
        <div
          v-show="!optionList[0]"
          class="no_child"
          :style="{ width: width - 28 + 'px' }"
        >
          暂无数据
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    width: {
      type: Number,
      default: 100,
    },
    height: {
      type: Number,
      default: 100,
    },
    num: {
      type: Number,
      default: 0,
    },
    id: {
      type: Number,
      default: 1,
    },
    placeholder: {
      type: String,
      default: "",
    },
    optionList: {
      type: Array,
      default: [],
    },
    Show: {
      type: Number,
      default: 0,
    },
    isClear: {
      type: Boolean,
      default:false
    }
  },

  data() {
    return {
      isShow: false,
      data: 1,
      valueOne: "",
      selectIocnOne: require("../images/3502@2x.png"),
      selectIocnTwo: require("../images/3501@2x.png"),
    };
  },
  watch: {
    num(newval) {
      if (this.isShow) {
        this.isShow = false;
      }
    },
    isClear(newval){
     
        this.valueOne = ''
      
    }
  },
  methods: {
    showOrHidden() {
      this.isShow = !this.isShow;
    },
    selectValue(data) {
      this.valueOne = data.label;
      this.isShow = false;
      this.$emit("change", this.id, data.value, data.label);
    },
  },
};
</script>

<style lang="less" scoped>
.content_select {
  background: rgba(15, 95, 165, 0.3);
  margin-top: 6px;
  padding-bottom: 10px;
  max-height: 210px;
  overflow-x: hidden;
  position: relative;
  z-index: 100000;
  .child {
    color: #fff;
    font-size: 16px;
    padding: 11.5px 0 6px 0;
    height: 38px;
    margin: 0 13px 0 18px;
    border-bottom: 1px solid rgba(26, 112, 185, 0.8);
    cursor: pointer;
  }
  .no_child {
    color: #fff;
    font-size: 16px;
    padding: 11.5px 0 6px 0;
    height: 38px;
    margin: 0 13px 0 18px;
    border-bottom: 1px solid rgba(26, 112, 185, 0.8);
  }
  .active {
    color: rgba(0, 255, 255, 0.6);
  }
}
.header_select {
  position: relative;
  background: url(../images/selectone@2x.png);
  background-size: cover;
  display: flex;
  align-items: center;
  cursor: pointer;
  .header_content {
    width: 220px;
    height: 21px;
    font-size: 17px;
    font-weight: 400;
    color: #ffffff;
    line-height: 21px;
    margin-left: 14.5px;
  }
  .header_icon {
    width: 12px;
    height: 12px;
    // margin-left: 140px;
  }
  span{
    position: absolute;
    left: 20px;
  }
}
</style>
